<div class="content">
    <div id="example_title">
        <h1>Grid Elements</h1>
        Every grid consists of header, toolbar, record headers, line numbers, etc. You can show/hide elements at any time.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="grid" style="width: 900px; height: 340px; overflow: hidden;"></div>
<br>
<button class="w2ui-btn" onclick="action('header')">Header</button>
<button class="w2ui-btn" onclick="action('toolbar')">Toolbar</button>
<button class="w2ui-btn" onclick="action('columnHeaders')">Column Headers</button>
<button class="w2ui-btn" onclick="action('footer')">Footer</button>
<span style="padding: 10px; color: silver">|</span>
<button class="w2ui-btn" onclick="action('lineNumbers')">Line Numbers</button>
<button class="w2ui-btn" onclick="action('selectColumn')">Select Column</button>
<button class="w2ui-btn" onclick="action('expandColumn')">Expand Column</button>
<button class="w2ui-btn" onclick="action('reorderRows')">Order Column (1.5+)</button>

<!--CODE-->
<script type="module">
import { w2grid, query } from '__W2UI_PATH__'

let grid = new w2grid({
    name: 'grid',
    box: '#grid',
    header: 'List of Names',
    reorderRows: false,
    show: {
        header: true,
        footer: true,
        toolbar: true,
        lineNumbers: true
    },
    columns: [
        { field: 'recid', text: 'ID', size: '30px' },
        { field: 'fname', text: 'First Name', size: '30%' },
        { field: 'lname', text: 'Last Name', size: '30%' },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'Start Date', size: '120px' }
    ],
    searches: [
        { type: 'int',  field: 'recid', label: 'ID' },
        { type: 'text', field: 'fname', label: 'First Name' },
        { type: 'text', field: 'lname', label: 'Last Name' },
        { type: 'date', field: 'sdate', label: 'Start Date' }
    ],
    onExpand(event) {
        query('#'+event.detail.box_id).html('<div style="padding: 10px; height: 100px">Expanded content</div>')
    }
})
grid.load('data/list.json')

window.action = function (param1) {
    if (param1 == 'reorderRows') {
        grid.reorderRows = !grid.reorderRows
    } else {
        grid.show[param1] = !grid.show[param1]
    }
    grid.refresh()
}
</script>

<!--CODE-->

<!--CODE-->
{
    "total": 9,
    "records": [
        { "recid": 1, "fname": "John", "lname": "Doe", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 2, "fname": "Stuart", "lname": "Motzart", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 3, "fname": "Jin", "lname": "Franson", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 4, "fname": "Susan", "lname": "Ottie", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 5, "fname": "Kelly", "lname": "Silver", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 6, "fname": "Francis", "lname": "Gatos", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 7, "fname": "Mark", "lname": "Welldo", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 8, "fname": "Thomas", "lname": "Bahh", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 9, "fname": "Sergei", "lname": "Rachmaninov", "email": "jdoe@gmail.com", "sdate": "4/3/2012" }
    ]
}
